<template>
  <div v-if="role_list">
    <ul>
      <li
        v-for="item in role_list.rows"
        :key="item.id"
      >
        <div>
          <img
            :src="item.logo"
            alt="logo"
          >
        </div>
        <div>{{item.name}}</div>
        <div><i
            class="el-icon-edit"
            @click="editRole(item)"
          ></i><i
            class="el-icon-delete"
            @click="delRole(item.id)"
          ></i></div>
        <div @click="pushDetail(item)">
          岗位人员({{item.qty}}人)
        </div>
      </li>
    </ul>
    <el-pagination
      @current-change="handleCurrentChange"
      background
      :current-page="1"
      :page-size="10"
      prev-text="上一页"
      next-text="下一页"
      layout="total, prev, pager, next, jumper"
      :total="role_list.total"
    >
    </el-pagination>
    <create-role :form="form"></create-role>
  </div>
</template>

<script>
import role from "@/api/role.js";

import CreateRole from "./create.vue";

import { mapGetters } from "vuex";

export default {
  name: "role-list",
  components: {
    CreateRole
  },
  computed: {
    ...mapGetters("role", ["is_create_dialog_show", "role_list"])
  },
  data() {
    return {
      form: undefined
    };
  },
  mounted() {
    this.$store.dispatch("role/getRoleList", { pageSize: 10, pageNumber: 1 });
  },
  methods: {
    editRole(val) {
      this.$store.commit("role/CHANGE_IS_CREATE", false);
      this.$store.commit("role/CHANGE_IS_CREATE_DIALOG_SHOW", true);
      this.form = {
        roleName: val.name,
        roleId: val.id,
        remark: val.remark
      };
    },
    delRole(id) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          role
            .delRole({ id: id })
            .then(res => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.$store.dispatch("role/getRoleList");
            })
            .catch(err => {
              this.$message.error(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getRoleList(params) {
      role
        .getNewRoleList(params)
        .then(res => {
          this.role_list = res.rows;
          this.total = res.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleCurrentChange(val) {
      this.$store.dispatch("role/getRoleList", { pageNumber: val });
      this.getRoleList({ pageNumber: val });
    },
    pushDetail(item) {
      this.$router.push({
        path: "/manage/role/detail",
        query: {
          id: item.id,
          name: item.name,
          num: item.qty,
          remark: item.remark
        }
      });
    }
  },
  watch: {
    is_create_dialog_show(newVal) {
      if (!newVal) {
        this.getRoleList();
      }
    }
  }
};
</script>

<style scoped>
ul {
  margin-top: 30px;
}

ul > li {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0px 0px 11px 6px rgba(238, 234, 234, 1);
  border: 1px solid rgba(255, 255, 255, 0);
  margin-bottom: 30px;
}

ul > li > div {
  width: 25%;
}

ul > li > div:first-of-type {
  width: 150px;
}

ul > li > div:nth-of-type(3) {
  text-align: right;
}

ul > li > div:nth-of-type(4) {
  width: 300px;
  background-color: rgba(109, 127, 225, 1);
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin-right: 15px;
}
ul > li > div:nth-of-type(4) {
  color: rgba(255, 255, 255, 1);
}

ul > li > div:nth-of-type(3) > i {
  padding-right: 20px;
  color: rgba(255, 152, 0, 1);
}

i:hover,
ul > li > div:nth-of-type(4):hover {
  cursor: pointer;
}

img {
  margin-top: 5px;
  width: 60px;
  height: 60px;
  padding-left: 15px;
}
</style>
